<template>
	<div>
		<navigationBar :backType="2" :navigationTitle="navigationTitle" />

		<view class="wrap paddingBottom">
			<view class="wrap-address-content">
				<view class="address-content">
					<view class="content-item flex align-center just-between">
						<view class="left f-30">联系人</view>

						<input
							class="input f-26"
							type="text"
							placeholder="请输入联系人姓名"
							placeholder-class="place"
							v-model="name"
						/>
					</view>

					<view class="content-item flex align-center just-between">
						<view class="left f-30">手机号</view>

						<input
							class="input f-26"
							type="tel"
							maxlength="11"
							placeholder="请输入手机号"
							placeholder-class="place"
							v-model="mobile"
						/>
					</view>
				</view>

				<view class="address-content marginTop">
					<view class="content-item flex align-center just-between">
						<view class="left f-30">选择地区</view>

						<picker
							mode="multiSelector"
							:range="region_list"
							range-key="name"
							@columnchange="addressColumnsChange"
							@change="addressSure"
						>
							<view class="input f-26 flex align-center just-end">
								<text v-if="address == ''" class="place"> 请选择地区 </text>
								<text v-else>{{ address }}</text>
							</view>
						</picker>
					</view>

					<view class="content-item flex align-center just-between">
						<view class="left f-30">选择街道</view>

						<picker
							mode="selector"
							:range="street_list"
							range-key="name"
							:disabled="address == ''"
							@change="onStreetSure"
						>
							<view class="input f-26 flex align-center just-end">
								<text v-if="street_name == ''" class="place"> 请选择街道 </text>
								<text v-else>{{ street_name }}</text>
							</view>
						</picker>
					</view>

					<view class="content-item flex align-center just-between">
						<view class="left f-30">选择小区</view>

						<picker
							mode="selector"
							:range="community_list"
							range-key="name"
							:disabled="street_name == ''"
							@change="onCommunitySure"
						>
							<view class="input f-26 flex align-center just-end">
								<text v-if="community_name == ''" class="place"> 请选择小区 </text>
								<text v-else>{{ community_name }}</text>
							</view>
						</picker>
					</view>
				</view>

				<view class="address-content marginTop">
					<view class="content-item flex align-center just-between">
						<view class="left f-30">设为默认地址</view>

						<view class="switch-bg" @click="is_default = 1 - is_default">
							<image v-if="is_default == 1" :src="getImageURL('mine/address_default_select.png')" />
							<image v-else :src="getImageURL('mine/address_default_normal.png')" />
						</view>
					</view>
				</view>

				<view class="wrap-tip marginTop">
					<text class="f-24"> 设置后，下单优先展示该地址 </text>
				</view>

				<view class="address-content address-details marginTop">
					<view class="detail-title f-30"> 详情地址 </view>

					<textarea
						class="textarea f-26"
						v-model="area"
						placeholder="请输入详情地址"
						placeholder-class="place"
					/>
				</view>
			</view>
		</view>

		<wrapFooter :btnTitle="'保存'" @onClick="onSave" />
	</div>
</template>

<script>
	import {
		addEditAddress,
		getAddressDetails,
		getRegionList,
		getStreetList,
		getCommunityList,
	} from "@/API/address.js";
	import wrapFooter from "@/components/footer/footer.vue";

	export default {
		components: {
			wrapFooter,
		},
		data() {
			return {
				navigationTitle: "添加地址", //导航栏标题
				address_id: "", //地址ID

				name: "", //收件人姓名
				mobile: "", //收件人手机号
				address: "", //省市区地址
				street_name: "", //街道名称
				street_id: "", //街道ID
				community_name: "",
				community_id: "", //小区ID
				area: "", //详细地址
				is_default: 0, //是否默认地址
				region_list: [], //省市区列表
				street_list: [], //街道列表
				community_list: [], //小区列表
			};
		},
		onLoad(options) {
			if (options.address_id) {
				this.address_id = options.address_id;
				this.navigationTitle = "编辑地址";
				this.getData();
			}
			this.getRegionListData();
		},
		methods: {
			/**
			 * 省市区修改
			 */
			addressColumnsChange(e) {
				let index = e.detail.value;
				let column = e.detail.column;
				switch (column) {
					case 0: //改变省
						// this.region_list[1] = this.region_list[0][index].children;
						// this.region_list[2] = this.region_list[0][index].children[0].children;

						this.$set(this.region_list, 1, this.region_list[0][index].children);
						this.$set(this.region_list, 2, this.region_list[0][index].children[0].children);

						break;
					case 1: //改变市
						// this.region_list[2] = this.region_list[1][index].children;
						this.$set(this.region_list, 2, this.region_list[1][index].children);
						break;
				}
			},
			/**
			 * 省市区确定选择
			 */
			addressSure(e) {
				const province = this.region_list[0][e.detail.value[0]].name;
				const city = this.region_list[1][e.detail.value[1]].name;
				const area = this.region_list[2][e.detail.value[2]].name;

				const address = `${province}/${city}/${area}`;

				if (address !== this.address) {
					this.address = address;

					this.street_name = "";
					this.street_id = "";
					this.community_name = "";
					this.community_id = "";
					this.getStreetListData();
				}
			},
			/**
			 * 街道确定选择
			 */
			onStreetSure(e) {
				let index = e.detail.value;
				const street_name = this.street_list[index].name;
				const street_id = this.street_list[index].id;

				if (street_name !== this.street_name) {
					this.street_name = street_name;
					this.street_id = street_id;

					this.community_name = "";
					this.community_id = "";

					this.getCommunityListData();
				}
			},
			/**
			 * 小区确定
			 */
			onCommunitySure(e) {
				let index = e.detail.value;
				this.community_name = this.community_list[index].name;
				this.community_id = this.community_list[index].id;
			},
			/**
			 * 保存
			 */
			onSave() {
				if (this.name === "") {
					this.$st.show("请输入收件人姓名");
					return;
				}
				if (this.mobile === "") {
					this.$st.show("请输入收件人手机号");
					return;
				}
				if (this.address === "") {
					this.$st.show("请选择地区");
					return;
				}
				if (this.street_name === "") {
					this.$st.show("请选择街道");
					return;
				}
				if (this.community_name === "") {
					this.$st.show("请选择小区");
					return;
				}

				let obj = {
					name: this.name,
					mobile: this.mobile,
					address: this.address,
					street_name: this.street_name,
					street_id: this.street_id,
					community_name: this.community_name,
					community_id: this.community_id,
					area: this.area,
					is_default: this.is_default,
					address_id: this.address_id,
				};

				addEditAddress(obj).then((res) => {
					this.$st.show(res.msg, () => {
						uni.navigateBack();
					});
				});
			},
			/**
			 * 获取省市区列表
			 */
			getRegionListData() {
				getRegionList().then((res) => {
					const list = res.data;
					this.region_list.push(list);
					this.region_list.push(list[0].children);
					this.region_list.push(list[0].children[0].children);
				});
			},
			/**
			 * 获取街道列表
			 */
			getStreetListData() {
				getStreetList(this.address).then((res) => {
					this.street_list = res.data;
				});
			},
			/**
			 * 获取小区列表
			 */
			getCommunityListData() {
				getCommunityList(this.street_id).then((res) => {
					this.community_list = res.data;
				});
			},
			/**
			 * 获取详情
			 */
			getData() {
				getAddressDetails(this.address_id).then((res) => {
					this.name = res.data.name;
					this.mobile = res.data.mobile;
					this.address = res.data.address;
					this.street_name = res.data.street_name;
					this.street_id = res.data.street_id;
					this.community_name = res.data.community_name;
					this.community_id = res.data.community_id;
					this.area = res.data.area;
					this.is_default = res.data.is_default;

					this.getStreetListData();
					this.getCommunityListData();
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		--bottom-height: 140rpx;

		.wrap-address-content {
			padding: 20rpx;
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;

			.address-content {
				width: 100%;
				background-color: white;
				border-radius: 20rpx;
				box-sizing: border-box;
				overflow: hidden;
				padding: 0 30rpx;
			}
			.content-item {
				width: 100%;
				overflow: hidden;
				height: 90rpx;
				border-bottom: 2rpx solid $separa-color;

				&:last-child {
					border-bottom: none;
				}

				.left {
					color: $title-color;
				}

				.input {
					width: 500rpx;
					height: 60rpx;
					text-align: right;
					color: $title-color;
				}

				.switch-bg {
					width: 71rpx;
					height: 39rpx;

					> image {
						width: 100%;
						height: 100%;
					}
				}
			}

			/deep/ .place {
				color: $sub-title-color;
			}
		}

		.marginTop {
			margin-top: 20rpx;
		}

		.wrap-tip {
			padding: 0 32rpx;
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
			color: $sub-title-color;
		}

		.address-details {
			padding: 30rpx !important;

			.detail-title {
				color: $title-color;
			}

			.textarea {
				margin-top: 28rpx;
				width: 100%;
				height: 160rpx;
				overflow: hidden;
			}
		}
	}
</style>
